﻿<s:ScatterViewItem 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    xmlns:cjc="clr-namespace:Cjc.ChromiumBrowser;assembly=Cjc.ChromiumBrowser"
    xmlns:my="clr-namespace:Surfium"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="scatterViewItem" 
    x:Class="Surfium.MyWindow"
    AllowDrop ="True"
    mc:Ignorable="d"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
s:SurfaceDragDrop.DragEnter="scatterViewItem_DragEnter"
    s:SurfaceDragDrop.DragLeave="scatterViewItem_DragLeave"
    s:SurfaceDragDrop.Drop="scatterViewItem_Drop"
    
    Width="440" Height="500" MaxWidth="640" MinWidth="340" Background="{x:Null}" BorderThickness="0" >

    <!--xmlns:cjc="clr-namespace:Cjc.ChromiumBrowser;assembly=Cjc.ChromiumBrowser"-->
    <s:ScatterViewItem.Resources>

        <Storyboard x:Key="added_anim" Duration="0:0:0.2" Storyboard.TargetName="scatterViewItem" >
            <DoubleAnimation From="0" To="1" Duration="0:0:0.2" Storyboard.TargetProperty="Opacity"/>
        </Storyboard>
        <Storyboard x:Key="close_anim" Duration="0:0:0.2" Storyboard.TargetName="scatterViewItem" Completed="ClosingSB_Completed">
            <DoubleAnimation From="1" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="Opacity"/>
        </Storyboard>

        <SolidColorBrush x:Key="WhiteBgBorder" Color="#FA555555"/>
        <LinearGradientBrush x:Key="WhiteBg" EndPoint="0.5,1.000" StartPoint="0.5,0">
            <GradientStop Color="#FFC1C1C1" Offset="0"/>
            <GradientStop Color="#FFEDEDED" Offset="1"/>
        </LinearGradientBrush>
        <Style x:Key="epicStyle" TargetType="s:SurfaceUserControl">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type s:SurfaceUserControl}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="SpinAnimation" RepeatBehavior="Forever">
                                <DoubleAnimation To="419" From="60" Storyboard.TargetName="ellipse"	Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"/>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid Margin="0"  Width="174" Height="174" >
                            <Ellipse x:Name="ellipse"  StrokeThickness="20"  RenderTransformOrigin="0.5,0.5">
                                <Ellipse.Effect>
                                    <DropShadowEffect ShadowDepth="0" BlurRadius="3" Color="#FF000000"/>
                                </Ellipse.Effect>
                                <Ellipse.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="60"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Ellipse.RenderTransform>
                                <Ellipse.Stroke>
                                    <LinearGradientBrush MappingMode="RelativeToBoundingBox" EndPoint="0.5,1" StartPoint="0.5,0">
                                        <!--<GradientStop Color="#E5FFFF00" Offset="1"/>
                                        <GradientStop Color="#BF00E9FF"/>-->
                                        <GradientStop Color="#FF888888" Offset="1"/>
                                        <GradientStop Color="#FFEEEEEE" Offset="0"/>
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                            </Ellipse>
                            <Ellipse  StrokeThickness="20" Margin="0,-1,0,1" Opacity="0.5">
                                <Ellipse.Stroke>
                                    <LinearGradientBrush MappingMode="RelativeToBoundingBox" EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#99FFFFFF" Offset="0.48"/>
                                        <GradientStop Offset="0.5"/>
                                        <GradientStop Color="White" Offset="0.022"/>
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                            </Ellipse>

                        </Grid>

                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <BeginStoryboard Storyboard="{StaticResource SpinAnimation}"/>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Storyboard x:Key="forward_sb" >
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="forward"  Storyboard.TargetProperty="Opacity">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Key="back_sb" >
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="back"  Storyboard.TargetProperty="Opacity">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <Style TargetType="{x:Type my:MyElementMenu}" x:Key="MyElementStyle">
            <Setter Property="my:MyElementMenu.Background">
                <Setter.Value>
                    <RadialGradientBrush>
                        <GradientStop Color="#0500E9FF" Offset="-0.1"/>
                        <GradientStop Color="#FF00E9FF" Offset="0"/>
                        <GradientStop Color="#0500E9FF" Offset="0.1"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="my:MyElementMenu.LoadingStarted" >
                    <EventTrigger.Actions>
                        <BeginStoryboard Name="MyLoadingStoryboard">
                            <Storyboard>
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[0].Color"
                                     To="#0500E9FF" 
                                    Duration="0:0:0.2" 
                                    RepeatBehavior="1x"
                                     />
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[2].Color"
                                    To="#0500E9FF" 
                                    Duration="0:0:0.2" 
                                    RepeatBehavior="1x"
                                     />

                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[1].Color"
                                    From="#FF00E9FF" 
                                    To="#6600E9FF" 
                                    Duration="0:0:1" 
                                    RepeatBehavior="Forever"
                                    DecelerationRatio="0.1"
                                     />
                                <DoubleAnimation
                                    From="-0.2"
                                    To="0.8"
                                    Duration="0:0:1"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Background.GradientStops[0].Offset" />
                                <DoubleAnimation
                                    From="0"
                                    To="1"
                                    Duration="0:0:1"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Background.GradientStops[1].Offset" />
                                <DoubleAnimation
                                    From="0.2"
                                    To="1.2"
                                    Duration="0:0:1"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Background.GradientStops[2].Offset" />

                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="my:MyElementMenu.LoadingSuccessful" >
                    <EventTrigger.Actions>
                        <StopStoryboard BeginStoryboardName="MyLoadingStoryboard" />
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[0].Color"
                                    To="#5500FF00" 
                                    Duration="0:0:0.5" 
                                    RepeatBehavior="1x"
                                    DecelerationRatio="0.1"
                                     />
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[1].Color"
                                    To="#5500FF00" 
                                    Duration="0:0:0.5" 
                                    RepeatBehavior="1x"
                                    DecelerationRatio="0.1"
                                     />
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[2].Color"
                                    To="#5500FF00" 
                                    Duration="0:0:0.5" 
                                    RepeatBehavior="1x"
                                    DecelerationRatio="0.1"
                                     />

                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="my:MyElementMenu.LoadedEmpty" >
                    <EventTrigger.Actions>
                        <StopStoryboard BeginStoryboardName="MyLoadingStoryboard" />
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[0].Color"
                                    To="#77000000" 
                                    Duration="0:0:0.5" 
                                    RepeatBehavior="1x"
                                    DecelerationRatio="0.1"
                                     />
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[1].Color"
                                    To="#77000000" 
                                    Duration="0:0:0.5" 
                                    RepeatBehavior="1x"
                                    DecelerationRatio="0.1"
                                     />
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.GradientStops[2].Color"
                                    To="#77000000" 
                                    Duration="0:0:0.5" 
                                    RepeatBehavior="1x"
                                    DecelerationRatio="0.1"
                                     />

                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type s:ScatterViewItem}">
            <Setter Property="Background" Value="{DynamicResource WhiteAlphaBrush}"/>
        </Style>

        <RadialGradientBrush x:Key="OsmoBrush">
            <GradientStop Color="#FFFE0000" Offset="0.322"/>
            <GradientStop Color="#33003AFF" Offset="0.906"/>
        </RadialGradientBrush>
        <SolidColorBrush x:Key="Labeler" Color="Transparent"/>
        <SolidColorBrush x:Key="BlackAlphaBrush" Color="#99000000"/>
        <SolidColorBrush x:Key="WhiteAlphaBrush" Color="#f6FFFFFF"/>
        <RadialGradientBrush x:Key="BluTarge">
            <GradientStop Color="#00000000" Offset="0.781"/>
            <GradientStop Color="#33003AFF" Offset="0.781"/>
        </RadialGradientBrush>
        <Color x:Key="border_grey">#FF8F8F8F</Color>
    </s:ScatterViewItem.Resources>


    <s:ScatterViewItem.Triggers>
        <EventTrigger RoutedEvent="my:MyWindow.Added">
            <BeginStoryboard Storyboard="{StaticResource added_anim}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="my:MyActionArea.Close">
            <BeginStoryboard Storyboard="{StaticResource close_anim}"/>
        </EventTrigger>
    </s:ScatterViewItem.Triggers>
    <Border x:Name="wrapper" Background="{DynamicResource WhiteBg}" BorderBrush="{DynamicResource WhiteBgBorder}" BorderThickness="1" CornerRadius="8" Margin="-5">
        <Grid x:Name="grid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="20"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <cjc:WebBrowser Grid.Row="1" x:Name="browser" EnableAsyncRendering="True" Grid.Column="1"	>
                <cjc:WebBrowser.LayoutTransform >
                    <TransformGroup>
                        <ScaleTransform ScaleX="{Binding Scale, ElementName=scrollViewer}" ScaleY="{Binding Scale, ElementName=scrollViewer}"/>
                    </TransformGroup>
                </cjc:WebBrowser.LayoutTransform>
            </cjc:WebBrowser>
            <Border IsHitTestVisible="False" BorderThickness="1,0,1,1" Margin="-1,-1,-1,0" Grid.Row="1" Grid.Column="1" BorderBrush="#66000000">
                <Border.Background>
                    <RadialGradientBrush Center="0.511,0.304" GradientOrigin="0.506,0.368" RadiusX="1.019" RadiusY="0.748">
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <ScaleTransform CenterX="0.511" CenterY="0.304" ScaleX="1" ScaleY="1"/>
                                <SkewTransform AngleX="0" AngleY="0" CenterX="0.511" CenterY="0.304"/>
                                <RotateTransform Angle="-0.857" CenterX="0.511" CenterY="0.304"/>
                                <TranslateTransform X="0"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                        <GradientStop Color="#33000000" Offset="1"/>
                        <GradientStop Offset="0.732"/>
                    </RadialGradientBrush>
                </Border.Background>
            </Border>
            <Rectangle Margin="12,20,-11,0" Grid.Column="2" Grid.Row="1" RadiusX="10" RadiusY="10">
                <Rectangle.Stroke>
                    <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                        <GradientStop Offset="0.5"/>
                        <GradientStop Color="#FF616161" Offset="0.5"/>
                    </LinearGradientBrush>
                </Rectangle.Stroke>
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                        <GradientStop Color="#00000000" Offset="0.5"/>
                        <GradientStop Color="#FF5D5D5D" Offset="0.5"/>
                        <GradientStop Color="#7F5D5D5D" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Margin="-11,20,12,0" Grid.Row="1" RadiusX="10" RadiusY="10" d:LayoutOverrides="HorizontalAlignment">
                <Rectangle.Stroke>
                    <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                        <GradientStop Offset="0.5" Color="#FF616161"/>
                        <GradientStop Offset="0.5"/>
                    </LinearGradientBrush>
                </Rectangle.Stroke>
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                        <GradientStop Color="#FF5D5D5D" Offset="0.5"/>
                        <GradientStop Color="#00000000" Offset="0.5"/>
                        <GradientStop Color="#7F5D5D5D"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>


            <Grid x:Name="control_grid"  Grid.Row="2" VerticalAlignment="Bottom" Height="30" Grid.ColumnSpan="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>

                <s:SurfaceUserControl Grid.Column="0" x:Name="touch_detect" ContactDown="touch_detect_ContactDown" ContactLeave="touch_detect_ContactLeave" Margin="-1,0,0,-1">
                    <s:SurfaceUserControl.Resources>

                        <LinearGradientBrush x:Key="detect_bg" EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Offset="1" Color="#FFB0B0B0"/>
                            <GradientStop Offset="0.02" Color="#FFECECEC"/>
                        </LinearGradientBrush>

                        <LinearGradientBrush x:Key="detect_bg_off" EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Offset="1" Color="#FFE0E0E0"/>
                            <GradientStop Offset="0.02" Color="#FFECECEC"/>
                        </LinearGradientBrush>

                        <LinearGradientBrush x:Key="detect_border" EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#00BBBBBB" Offset="0.268"/>
                            <GradientStop Color="#FA444444" Offset="0.574"/>
                        </LinearGradientBrush>
                        <LinearGradientBrush x:Key="detect_border_off" EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#00DDDDDD" Offset="0.268"/>
                            <GradientStop Color="#FA666666" Offset="0.574"/>
                        </LinearGradientBrush>
                        <Style x:Key="detect_style" TargetType="{x:Type Border}">
                            <Setter Property = "BorderBrush" Value="{StaticResource detect_border_off}"/>
                            <Setter Property = "Background" Value="{StaticResource detect_bg_off}"/>
                            <Style.Triggers>
                                <Trigger Property="Tag" Value="contact">
                                    <Setter Property = "Background" Value="{StaticResource detect_bg}"/>
                                    <Setter Property = "BorderBrush" Value="{StaticResource detect_border}"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </s:SurfaceUserControl.Resources>
                    <Border x:Name="touch_detect_border" Style="{DynamicResource detect_style}" Margin="0,0,0,-30" BorderThickness="1,0,1,1" CornerRadius="8" Padding="0" d:LayoutOverrides="VerticalAlignment">

                        <Canvas x:Name="hand" ClipToBounds="True" HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5" Margin="0,-177.533,-57.393,-181.922" Width="216.395">
                            <Canvas.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="0.12" ScaleY="0.12"/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Canvas.RenderTransform>
                            <Path x:Name="Tvar_1" Fill="#FF8B8B8B" Width="106" Height="117" Canvas.Left="28" Canvas.Top="23" Data="F1M53.25,1.687C81.555,1.687 104.5,24.633 104.5,52.937 104.5,72.397 93.655,89.323 77.679,98.001L77.396,98.138 77.425,97.722C77.475,96.558 77.5,95.319 77.5,94 77.5,94 77,52.833 77,52.833 77,40.177 66.74,29.917 54.083,29.917 41.427,29.917 30.333,40.177 30.333,52.833 30.333,52.833 29.667,98.333 29.667,98.333L29.677,98.414 28.821,98.001C12.845,89.323 2,72.397 2,52.937 2,24.633 24.945,1.687 53.25,1.687z"/>
                            <Path x:Name="Tvar_3" Fill="#FF8B8B8B" Width="204" Height="329" Canvas.Left="3" Canvas.Top="59" Data="F1M162.054,318.162C162.054,318.162 161.844,290.661 161.844,290.661 161.844,290.661 160.317,273.765 160.317,273.765 160.317,273.765 175.176,268.279 175.176,268.279 175.176,268.279 184.051,259.405 184.051,259.405 184.051,259.405 192.925,247.996 192.925,247.996 192.925,247.996 198.931,230.308 198.931,230.308 198.931,230.308 202.452,187.535 202.452,187.535 202.452,187.535 200.417,137.829 199.417,133.829 198.417,129.829 196.446,125.145 194.446,122.431 192.446,119.717 187.107,117.171 187.107,117.171 187.107,117.171 180.422,115.201 180.422,115.201 180.422,115.201 176.416,115.932 176.416,115.932 176.416,115.932 172.105,116.988 172.105,116.988 172.105,116.988 168.809,120.792 168.809,120.792 168.809,120.792 167.035,123.074 167.035,123.074 167.035,123.074 157.653,112.425 157.653,112.425 157.653,112.425 148.779,110.65 148.779,110.65 148.779,110.65 141.173,113.185 141.173,113.185 141.173,113.185 136.609,117.749 136.609,117.749 136.609,117.749 132.045,122.313 132.045,122.313 132.045,122.313 130.27,123.581 130.27,123.581 130.27,123.581 125.453,114.707 125.453,114.707 125.453,114.707 116.832,110.396 116.832,110.396 116.832,110.396 107.958,111.41 107.958,111.41 107.958,111.41 103.394,116.481 103.394,116.481 103.394,116.481 96.802,121.806 96.802,121.806 96.802,121.806 96.295,17.243 96.295,14.556 96.295,11.868 93.828,6.581 91.609,5.456 89.39,4.331 84.929,1.937 81.59,1.625 78.25,1.312 74.299,1.986 71.955,2.893 69.611,3.799 66.536,5.269 64.348,7.457 62.161,9.644 60.545,13.286 60.545,17.598 60.545,21.911 60.799,164.655 60.799,164.655 60.799,164.655 58.77,167.191 58.77,167.191 58.77,167.191 49.389,151.217 49.389,151.217 49.389,151.217 40.515,136.765 40.515,136.765 40.515,136.765 31.641,125.355 31.641,125.355 31.641,125.355 23.781,118.763 23.781,118.763 23.781,118.763 15.668,118.003 15.668,118.003 15.668,118.003 8.568,121.299 8.568,121.299 8.568,121.299 3.497,128.145 3.497,128.145 3.497,128.145 1.723,134.23 1.723,134.23 1.723,134.23 7.301,150.71 7.301,150.71 7.301,150.71 18.203,166.176 18.203,166.176 18.203,166.176 28.852,183.671 28.852,183.671 28.852,183.671 38.487,204.715 38.487,204.715 38.487,204.715 44.854,221.88 44.854,221.88 44.854,221.88 47.896,241.657 47.896,241.657 47.896,241.657 56.517,259.405 56.517,259.405 56.517,259.405 65.391,267.265 65.391,267.265 65.391,267.265 72.997,271.322 72.997,271.322 72.997,271.322 68.18,321.293 68.18,321.293 68.18,321.293 88.464,326.618 88.464,326.618 88.464,326.618 101.902,326.618 101.902,326.618 101.902,326.618 118.129,327.125 118.129,327.125 118.129,327.125 142.469,321.8 142.469,321.8 142.469,321.8 162.054,318.162 162.054,318.162z"/>
                            <Path x:Name="Tvar_2" Fill="#FF8B8B8B" Width="154" Height="162" Canvas.Left="4" Canvas.Top="-1" Data="F1M77.25,1.312C119.017,1.312 152.875,35.171 152.875,76.937 152.875,108.262 133.83,135.139 106.687,146.619L101.5,148.517 101.5,141.875C101.5,139.609,101.5,137.344,101.5,135.22L101.5,132.484 106.147,130.245C125.046,119.979 137.875,99.957 137.875,76.937 137.875,43.455 110.732,16.312 77.25,16.312 43.768,16.312 16.625,43.455 16.625,76.937 16.625,102.049 31.893,123.595 53.652,132.798L54.167,132.986 54.167,135.387C54.167,139.635,54.167,144.449,54.167,148.697L54.167,148.945 47.813,146.619C20.67,135.139 1.625,108.262 1.625,76.937 1.625,35.171 35.483,1.312 77.25,1.312z"/>
                        </Canvas>
                    </Border>
                </s:SurfaceUserControl>
                <s:SurfaceSlider 
                                ContactLeave="linkMenuContSizeSlider_LostContactCapture"
                                LostContactCapture="linkMenuContSizeSlider_LostContactCapture"
                                ValueChanged="linkMenuContSizeSlider_ValueChanged" x:Name="linkMenuContSizeSlider" Grid.Column="2" Minimum="40" Maximum="130" LargeChange="4" SmallChange="2" Value="50" TickFrequency="0" Margin="0,0,20,0"/>
                <s:SurfaceTextBox KeyDown="URL_KeyDown" Name="url_textbox"  Padding="5" Margin="10,0" VerticalAlignment="Center" Background="#191B2022" TextWrapping="NoWrap" Grid.Column="1" BorderThickness="1" BorderBrush="#FF8C8C8C"/>
            </Grid>
            <s:SurfaceUserControl 
                            HorizontalAlignment="Left" 
                            Visibility="Hidden" 
                            VerticalAlignment="Top"  
                            Width="140" 
                            Height="140" 
                            x:Name="linkMenuCont"  
                            Grid.Row="1" Margin="0" Grid.Column="1">

                <Grid Margin="0">
                    <Border
                                                    IsHitTestVisible="False"
                                x:Name="targe"
                                HorizontalAlignment="Center" 
                                VerticalAlignment="Center"  
                                Width="{Binding Value, ElementName=linkMenuContSizeSlider}" 
                                Height="{Binding Value, ElementName=linkMenuContSizeSlider}" >
                        <Border.Background>
                            <RadialGradientBrush>
                                <GradientStop Color="#001C3A45" Offset="0.906"/>
                                <GradientStop Color="#331B3640" Offset="0.9"/>
                                <GradientStop Offset="0.475" Color="#4CFFFFFF"/>
                                <GradientStop Color="#331A343E" Offset="0.852"/>
                            </RadialGradientBrush>
                        </Border.Background>

                        <!--Background="{DynamicResource BackgroundBrush}"-->

                    </Border>

                    <my:MyElementMenu 
            
                                    x:Name="linkMenu" Width="50" Height="50" 
                    
                                            IsHitTestVisible="True"
                                           SubmenuClosed="hideMenu_Animate"  
                                           ActivationMode="AlwaysActive"     
                                           HorizontalAlignment="Center" 
                                           VerticalAlignment="Center"
                                           Orientation="90" 
                                           ToolTip="Links" s:TagVisualizer.IsTagVisualizationHost="False" IsSubmenuOpen="True"
                                           Style="{StaticResource MyElementStyle}"/>

                </Grid>
            </s:SurfaceUserControl>
            <my:MyActionArea  x:Name="scrollViewer" Grid.Row="1" Elasticity="0, 0" Grid.Column="1"/>
            <Canvas  x:Name="popUpCanvas" Grid.Row="1" Grid.Column="1">
                <my:MyPopUp 
                                Canvas.Top="{Binding PopUpPositionY}"
                                Canvas.Left="{Binding PopUpPositionX}"
                                x:Name="mpop" Visibility="Hidden"/>

            </Canvas>
            <s:SurfaceUserControl x:Name="infoCanvas" Visibility="Hidden" Opacity="0.4" Grid.Row="1" Style="{StaticResource epicStyle}" Grid.Column="1"/>
            <Border x:Name="forward" Opacity="0" IsHitTestVisible="False"  Grid.Row="1" Grid.Column="1">
                <Image Source="forward.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300"/>
            </Border>
            <Border x:Name="back" Opacity="0"  IsHitTestVisible="False"   Grid.Row="1" Grid.Column="1">
                <Image Source="backward.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300"/>
            </Border>
        </Grid>
    </Border>
</s:ScatterViewItem>
